renderScore()//渲染成绩管理列表


const tbody = document.querySelector('tbody');

//渲染成绩管理列表
async function renderScore() {
    const { data } = await axios({ url: '/score/list' })
    let html = ''
    for (const key in data) {
        const { name, score } = data[key]
        html += `<tr>
        <th scope="row">${key}</th>
        <td>${name}</td>
        ` + score.reduce((a, b, c) => a + `<td class="score" data-id=${key} data-index=${c + 1}>${b}</td>`, '') + `</tr>`
    }
    tbody.innerHTML = html
}

const score = document.querySelector('.score');
//双击事件
tbody.addEventListener('dblclick', function (e) {
    if (e.target.classList.contains('score')) {
        const input = document.createElement('input')//创建标签
        input.type = 'text'
        input.style.display = 'block'
        input.value = e.target.innerText
        e.target.appendChild(input)//插入标签
        input.focus()//自动获取焦点
        const { id, index } = e.target.dataset//自定义属性，获取id和下标
        //失去焦点
        input.addEventListener('blur', async function (e) {
            const scoreValue = input.value
            if (scoreValue >= 0 && scoreValue <= 100) {
                await axios({
                    method: 'post',
                    url: '/score/entry',
                    data: {
                        "stu_id": id,
                        "batch": index,
                        "score": scoreValue
                    }
                })
                toastr.success('修改成绩成功');
                renderScore()
            } else {
                toastr.error('请输入0-100的数字')
                input.remove()//删除该元素
            }
        })

        //键盘按下Enter 触发修改事件
        input.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                input.blur()
            }
        })

    }
})
